import {
  View,
  Text,
  Image,
  useWindowDimensions,
  FlatList,
  Pressable,
} from 'react-native';
import React, {useEffect, useRef, useState} from 'react';
import {base} from '../service';

export default function Carousel({list}) {
  //状态变量 —— 当前滚动到哪个广告了，例如：0/1/2...list.length-1
  let [cur, setCur] = useState(0);
  //组件的引用 —— 指向FlatList组件
  let flatListRef = useRef();
  //调用RN提供的钩子，获取屏幕的尺寸
  let windowWidth = useWindowDimensions().width; //窗口的宽度
  //let windowHeight = useWindowDimensions().height; //窗口的高度

  //生命周期方法 —— list中的数据发生改变了
  useEffect(() => {
    //console.log('LIST发生改变了:', list.length);  //此句会执行两次，length分别是0和4
    //判定如果轮播列表中有了数据，且多于1个，就要开启定时器
    let timer = null; //轮播定时器
    if (list.length > 1) {
      timer = setInterval(() => {
        //让FlatList滚动到最新的位置
        flatListRef.current.scrollToIndex({
          index: cur,
        });
        console.log('当前正在显示的轮播广告下标：', cur);
        let i = cur + 1;
        i = i >= list.length ? 0 : i; //防止下标i越界，不能超过length-1
        setCur(i);
      }, 2000);
    }
    //为当前生命周期方法再添加一个清理方法 = 指定数据改变 + 组件卸载
    return () => {
      //提示：如果此处不执行定时器的清理操作，会产生“内存泄漏”
      if (timer) {
        // console.log('清理掉轮播定时器');
        clearInterval(timer); //停止定时器
        timer = null; //定时器变量设置为空
      }
    };
  }, [list, cur]); //生命周期方法内（会创建闭包）如果修改了外部变量，必须依赖于该变量，否则闭包内用于看不到修改后的值

  //渲染一个列表项
  let _renderItem = ({item, index}) => {
    //解构形参得到的item：就是每个轮播广告
    //解构形参得到的index：就是每个轮播广告的原始数组中的下标
    //提示：获取远程一张图片的尺寸 Image.getSize('https://...jpg', (w, h)=>{})
    return (
      <Pressable>
        <Image
          //轮播图原始尺寸：600*180，此处需要等比例缩小
          style={{width: windowWidth, height: (180 * windowWidth) / 600}}
          source={{uri: base + item.pic}}
        />
      </Pressable>
    );
  };
  return (
    <View>
      {/* RN中没有提供轮播组件，只能使用FlatList来模拟 */}
      {/* data：要渲染的所有数据 */}
      {/* renderItem：如果渲染一个列表项 */}
      {/* horizontal：是否水平排列列表项 */}
      {/* pagingEnabled：是否启用分页显示（即要么查看1，要么查看2，不能查看1.5） */}
      <FlatList
        ref={flatListRef}
        data={list}
        renderItem={_renderItem}
        horizontal={true}
        pagingEnabled={true}
      />
    </View>
  );
}
